<template>
  <div class="tou">
    <div class="header">爆款排行</div>
    <div class="nav">
      <div class="link">
        <router-link to="/paihang/zonghe"> 综合 </router-link>
        <router-link class="jiantou" to="/paihang/quanhou"> 券后价 </router-link>
        <router-link class="jiantou" to="/paihang/xiaoliang"> 销量 </router-link>
      </div>
      <div class="qiehuan">
          <i class="iconfont icon-caidan"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.tou{
    border-bottom: 2px solid #ebebeb;
}
.jiantou{
    position: relative;
} 
.jiantou::after{
    content: "";
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid #687b81;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    position: absolute;
    top: -3rem;
    right: -10rem;
}
.jiantou::before{
    content: "";
    width: 0;
    height: 0;
    border-top: 4px solid #687b81;
    border-bottom: 4px solid transparent;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    position: absolute;
    bottom: -3rem;
    right: -10rem;
}
.header {
  height: 60rem;
  text-align: center;
  font-size: 14rem;
  color: #4d5b5c;
  line-height: 60rem;
  font-weight: bold;
}
.nav{
    display: flex;
}
.link {
  height: 36rem;
  display: flex;
  justify-content: space-evenly;
  width: 310rem;
  align-items: center;
  color: #687b81;
}
.link a{
    font-size: 12rem;
}
.qiehuan{
    height: 36rem;
    width: 50rem;
    font-size: 12rem;
    color: #687b81;
    line-height: 36rem;
    text-align: center;
}
.router-link-active{
    color: #d49a8e;
}
</style>
